<script setup lang="ts">
import request from '@/utils/request'

const tableData = [
  {
    platform: '【奶昔】Welearn（一本）',
    account_passwd: '自动识别 19965488975 abc@1234\t',
    course: '全新版大学英语视听说教程4',
    status:'上号中',
    remark:'_ | 考试状态：_ | 更新时间：Sun, 08 Jun 2025 16:03:21 GMT',
    create_time:'2025-06-08 16:02:19',
  },
]

import { reactive } from 'vue'
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<template>
  <el-card>
    <template #header>
      <div class="card-header" >
        <span>订单列表</span>
      </div>
    </template>
    <el-form :model="form" label-width="auto" style="max-width: 100vh;">
        <el-row>
          <el-col span="8">
            <el-select v-model="form.region" placeholder="请选择订单状态" style="width: 25vh">
              <el-option label="已提交" value="已提交" />
              <el-option label="待处理" value="待处理" />
              <el-option label="进行中" value="进行中" />
              <el-option label="已完成" value="已完成" />
              <el-option label="待重刷" value="待重刷" />
            </el-select>
          </el-col>
          <el-col span="8" style="margin-left: 15px">
              <el-input v-model="form.account" placeholder="请输入下单账号" />
          </el-col>
          <el-col span="8" style="margin-left: 15px">
            <el-button type="primary">查询</el-button>
          </el-col>
        </el-row>

    </el-form>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="platform" label="平台" width="200" />
      <el-table-column prop="account_passwd" label="账号 密码" width="180" />
      <el-table-column prop="course" label="课程名" width="180" />
      <el-table-column prop="status" label="任务状态" width="90" />
      <el-table-column prop="remark" label="备注" width="180" />
      <el-table-column prop="create_time" label="提交时间" />
    </el-table>

    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 25, 50, 75]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
